<template>
  <div class="wb-main">
    <el-card shadow="never">
      <span class="font-title-medium">退货商品</span>
      <el-table
        ref="productTable"
        border
        class="standard-margin"
        :data="productList"
      >
        <el-table-column label="商品图片" width="160" align="center">
          <template slot-scope="scope">
            <img style="height:80px" :src="getListImage(scope.row.pic)">
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center">
          <template slot-scope="scope">
            <span class="font-small">{{ scope.row.prodName }}</span><br>
          </template>
        </el-table-column>
        <el-table-column label="价格" width="180" align="center">
          <template slot-scope="scope">
            <span class="font-small">{{ scope.row.amount }}</span><br>
          </template>
        </el-table-column>
        <el-table-column label="属性" width="180" align="center">
          <template slot-scope="scope">{{ scope.row.productAttr }}</template>
        </el-table-column>
        <el-table-column label="数量" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.number }}</template>
        </el-table-column>
        <el-table-column label="小计" width="100" align="center">
          <template slot-scope="scope">￥{{ scope.row.totalAmount }}</template>
        </el-table-column>
      </el-table>

    </el-card>
    <el-card shadow="never" class="standard-margin">
      <span class="font-title-medium">服务单信息</span>
      <div class="form-container-border">
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small">服务单号</el-col>
          <el-col class="form-border font-small" :span="18">{{ orderReturnApply.refundSn }}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">申请状态</el-col>
          <el-col class="form-border font-small" :span="18">{{ orderReturnApply.refundSts | formatStatus }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small" style="height:50px;line-height:30px">订单编号
          </el-col>
          <el-col class="form-border font-small" :span="18" style="height:50px">
            {{ orderReturnApply.orderNumber }}
            <!-- <el-button type="text" size="small" @click="handleViewOrder">查看</el-button> -->
          </el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">申请时间</el-col>
          <el-col class="form-border font-small" :span="18">{{ orderReturnApply.applyTime }}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">用户账号</el-col>
          <el-col class="form-border font-small" :span="18">{{ orderReturnApply.userName }}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">客户名</el-col>
          <el-col class="form-border font-small" :span="18">{{ orderReturnApply.customerName }}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">退货原因</el-col>
          <el-col class="form-border font-small" :span="18">{{ orderReturnApply.buyerMsg }}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6" style="height:100px;line-height:80px">凭证图片
          </el-col>
          <el-col class="form-border font-small" :span="18" style="height:100px">
            <img v-for="(item,index) in orderReturnApply.photoFiles" :key="index+'img'" style="width:80px;height:80px" :src="getListImage(item)">
          </el-col>
        </el-row>
      </div>
      <div class="form-container-border">
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">订单金额</el-col>
          <el-col class="form-border font-small" :span="18">￥{{ totalAmount }}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">确认退款金额
          </el-col>
          <el-col class="form-border font-small" style="height:52px" :span="18">
            ￥
            <el-input
              v-model="updateStatusParam.returnAmount"
              size="small"
              :disabled="orderReturnApply.applyType!==2&&orderReturnApply.applyType!==3"
              style="width:200px;margin-left: 10px"
            />
          </el-col>
        </el-row>
        <!-- <div v-show="orderReturnApply.status!==3">
          <el-row>
            <el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">选择收货点
            </el-col>
            <el-col class="form-border font-small" style="height:52px" :span="18">
              <el-select
                v-model="updateStatusParam.companyAddressId"
                size="small"
                style="width:200px"
                :disabled="orderReturnApply.status!==0"
              >
                <el-option
                  v-for="address in companyAddressList"
                  :key="address.id"
                  :value="address.id"
                  :label="address.addressName"
                />
              </el-select>
            </el-col>
          </el-row>
          <el-row>
            <el-col class="form-border form-left-bg font-small" :span="6">收货人姓名</el-col>
            <el-col class="form-border font-small" :span="18">{{ currentAddress.name }}</el-col>
          </el-row>
          <el-row>
            <el-col class="form-border form-left-bg font-small" :span="6">所在区域</el-col>
            <el-col class="form-border font-small" :span="18">{{ currentAddress | formatRegion }}</el-col>
          </el-row>
          <el-row>
            <el-col class="form-border form-left-bg font-small" :span="6">详细地址</el-col>
            <el-col class="form-border font-small" :span="18">{{ currentAddress.detailAddress }}</el-col>
          </el-row>
          <el-row>
            <el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col>
            <el-col class="form-border font-small" :span="18">{{ currentAddress.phone }}</el-col>
          </el-row>
        </div> -->
      </div>
      <div class="form-container-border">
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">处理人员</el-col>
          <el-col class="form-border font-small" :span="18">{{ orderReturnApply.handleMan || "-" }}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">处理时间</el-col>
          <el-col class="form-border font-small" :span="18">{{ orderReturnApply.handleTime|| "-" }}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">处理备注</el-col>
          <el-col class="form-border font-small" :span="18">
            <el-input v-model="sellerMsg" :readonly="orderReturnApply.refundSts == 1" />
          </el-col>
        </el-row>
      </div>

      <div v-show="orderReturnApply.refundSts == 1 && orderReturnApply.applyType ==2" style="margin-top:15px;text-align: center">
        <el-button type="primary" size="small" @click="orderConfirmRefund(1)">确认退货</el-button>
        <el-button type="danger" size="small" @click="orderConfirmRefund(0)">拒绝退货</el-button>
      </div>
      <div v-show="orderReturnApply.refundSts == 1 && orderReturnApply.applyType ==3" style="margin-top:15px;text-align: center">
        <el-button type="primary" size="small" @click="orderConfirmRefund(1)">确认换货</el-button>
        <el-button type="danger" size="small" @click="orderConfirmRefund(0)">拒绝换货</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import orderApi from '@/api/order'
// import { getApplyDetail, updateApplyStatus } from '@/api/returnApply'
// import { fetchList } from '@/api/companyAddress'
// import { formatDate } from '@/utils/date'

const defaultUpdateStatusParam = {
  companyAddressId: null,
  handleMan: 'admin',
  handleNote: null,
  receiveMan: 'admin',
  receiveNote: null,
  returnAmount: 0,
  status: 0
}
const defaultOrderReturnApply = {
  id: null,
  orderId: null,
  companyAddressId: null,
  productId: null,
  orderSn: null,
  createTime: null,
  memberUsername: null,
  returnAmount: null,
  returnName: null,
  returnPhone: null,
  status: null,
  handleTime: null,
  productPic: null,
  productName: null,
  productBrand: null,
  productAttr: null,
  productCount: null,
  productPrice: null,
  productRealPrice: null,
  reason: null,
  description: null,
  proofPics: null,
  handleNote: null,
  handleMan: null,
  receiveMan: null,
  receiveTime: null,
  receiveNote: null
}
export default {
  name: 'ReturnApplyDetail',
  filters: {
    formatStatus(status) {
      if (status === 1) {
        return '待处理'
      } else if (status === 2) {
        return '退货中'
      } else if (status === 3) {
        return '已完成'
      } else if (status === 4) {
        return '已拒绝'
      } else if (status === 5) {
        return '换货中'
      }
    },
    formatTime(time) {
      if (time == null || time === '') {
        return 'N/A'
      }
      const date = new Date(time)
      return ''
      // return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
    formatRegion(address) {
      let str = address.province
      if (address.city != null) {
        str += '  ' + address.city
      }
      str += '  ' + address.region
      return str
    }
  },
  data() {
    return {
      id: null,
      orderReturnApply: Object.assign({}, defaultOrderReturnApply),
      productList: [],
      proofPics: null,
      updateStatusParam: Object.assign({}, defaultUpdateStatusParam),
      companyAddressList: null,
      sellerMsg: ''
    }
  },
  computed: {
    totalAmount() {
      let amount = 0
      this.productList.forEach(element => {
        if (element.totalAmount) {
          amount = Number(element.totalAmount) + amount
        }
      })
      return amount
    },
    currentAddress() {
      console.log('currentAddress()')
      const id = this.updateStatusParam.companyAddressId
      if (this.companyAddressList == null) return {}
      for (let i = 0; i < this.companyAddressList.length; i++) {
        const address = this.companyAddressList[i]
        if (address.id === id) {
          return address
        }
      }
      return null
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getDetail(this.id)
  },
  methods: {
    handleViewOrder() {
      this.$router.push({ path: '/oms/orderDetail', query: { id: this.orderReturnApply.orderId }})
    },
    getDetail(id) {
      orderApi.orderRefundApply(id).then((res) => {
        const data = res.data
        const refundOrder = data.refundOrder
        const applyMsg = data.applyMsg
        this.productList = refundOrder
        this.orderReturnApply = applyMsg
      })
      // getApplyDetail(this.id).then(response => {
      //   console.log('getDetail')
      //   this.orderReturnApply = response.data
      //   this.productList = []
      //   this.productList.push(this.orderReturnApply)
      //   if (this.orderReturnApply.proofPics != null) {
      //     this.proofPics = this.orderReturnApply.proofPics.split(',')
      //   }
      //   // 退货中和完成
      //   if (this.orderReturnApply.status === 1 || this.orderReturnApply.status === 2) {
      //     this.updateStatusParam.returnAmount = this.orderReturnApply.returnAmount
      //     this.updateStatusParam.companyAddressId = this.orderReturnApply.companyAddressId
      //   }
      //   this.getCompanyAddressList()
      // })
    },
    getCompanyAddressList() {
      // fetchList().then(response => {
      //   console.log('getCompanyAddressList()')
      //   this.companyAddressList = response.data
      //   for (let i = 0; i < this.companyAddressList.length; i++) {
      //     if (this.companyAddressList[i].receiveStatus === 1 && this.orderReturnApply.status === 0) {
      //       this.updateStatusParam.companyAddressId = this.companyAddressList[i].id
      //     }
      //   }
      // })
    },
    handleUpdateStatus(status) {
      this.updateStatusParam.status = status
      this.$confirm('是否要进行此操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // updateApplyStatus(this.id, this.updateStatusParam).then(response => {
        //   this.$message({
        //     type: 'success',
        //     message: '操作成功!',
        //     duration: 1000
        //   })
        //   this.$router.back()
        // })
      })
    },
    getListImage(url) {
      return process.env.VUE_APP_BASE_API + url
    },
    orderConfirmRefund(status) {
      const formData = {
        id: this.id,
        type: this.orderReturnApply.applyType,
        status: status,
        sellerMsg: this.sellerMsg
      }
      orderApi.orderConfirmRefund(formData).then(() => {
        this.$message('处理成功')
      })
    }
  }
}
</script>
<style scoped>
  /* .detail-container {
    position: absolute;
    left: 0;
    right: 0;
    width: 1080px;
    padding: 35px 35px 15px 35px;
    margin: 20px auto;
  } */

  .standard-margin {
    margin-top: 15px;
  }
  .form-border {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
  }

  .form-container-border {
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
    margin-top: 15px;
  }

  .form-left-bg {
    background: #F2F6FC;
  }
</style>

